<!DOCTYPE html>
<html>


<head>
	<meta charset="UTF-8">
	<title>可输入的下拉框（允许输入非选项值）</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<link rel="stylesheet" href="../../libs/jsTree/style.min.css">

	<script src="../../libs/jquery-easyui-1.8.5/jquery.min.js"></script>
	<script src="../../libs/layui/layui-2.4.5/dist/layui.js"></script>
	<script src="../../libs/jsTree/jstree.js"></script>
	<style>
		body{padding: 10px 100px;}

	</style>
</head>

<body >

	<pre class="layui-code">
		#jsTree demo
	</pre>
	<div class=" pims-tree">
		<div class="layui-input-inline" style="padding:30px 0">
			<input id="userTreeSearch" style="height: 20px;" placeholder="请输入你想查询的内容" class="layui-input">
		</div>
		<!--添加检索结果-->
		<div id="userTreeSearchResult" class="search-results"></div>
		<div id="treeArea" style="overflow: auto">
			<div id="userTree" class="jsTree"></div>
		</div>
	</div>
	
	<script>
		
		var data = [
					{id:1,text:"jiang",parent:"#"},
					{id:2,text:"xu1",parent:"1"},
					{id:3,text:"xx2",parent:"#"},
					{id:4,text:"xx3",parent:"3"},
					{id:5,text:"xx4",parent:"3"},
				];

		$("#userTree").jstree({
			core:{
				themes:{
					variant:"large"
				},
				multiple:false,
				animation:0,
				data:data
			},
			
			// plugins:["wholerow","checkbox", 'search'],
			plugins:['search','contextmenu'],
			checkbox:{
				"keep_selected_style":false
			},
			contextmenu: {
                select_node: false,
                show_at_node: true,
                'items': initContextMenu()
            },

			// search:function(v){
			// 	console.log("--",v)
			// } 
		});


		$("#userTreeSearch").keyup(e=>{
			//回车
			if(e.keyCode===13){
	
				var v = $("#userTreeSearch").val();
				// alert(v);
				var searchResult = $("#userTree").jstree("search",v);
			}
		})

		function initContextMenu(node){
			 //不同节点菜单不一样
			 var items = {
					'item1': {
						'label': '新增用户',
						// 'icon': "/static/assets/img/treeContext/5011.png",
						'action': function () {
							console.log("新增用户")	
						}
					},
					'item3': {
						'label': '修改',
						// 'icon':"/static/assets/img/treeContext/53.png",
						'action': function () {
							console.log("修改用户")	
						}
					}
       		 }
			 return items;

		}

	
		


	</script>
</body>

</html>